<template>
  <div class="share-box" :class="{ 'share-box-fixed': shareFixed }" ref="shareBox">
    <a class="share-count" href="#comment_area" ga_event="click_comment_anchor">
      <tt-icon type="comments_anchor" size="30" color="#f85959"></tt-icon>
      <span>{{ comment_Count }}</span>
    </a>
    <div class="share-hr"></div>
    <div class="share-type" @click="bdShareClick('tsina')" ga_event="click_share_weibo"><tt-icon type="sina" size="34" color="#ff6631"></tt-icon><span>微博</span></div>
    <div class="share-type" @click="bdShareClick('qzone')" ga_event="click_share_qzone"><tt-icon type="qzone" size="34" color="#ffbd1d"></tt-icon><span>Qzone</span></div>
    <div class="share-type share-weixin"
         @mouseenter="weixinShare" ga_event="click_share_weixin">
      <tt-icon type="wechat" size="34" color="#52cd3e"></tt-icon><span>微信</span>
      <div class="share-qrcode">
        <div id="J_qrcode"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  @import './sharebox.less';
</style>

<script>
  import QRCode from 'byted-toutiao-pc-business-components/src/js/qrcode.js'
  import bdShare from 'byted-toutiao-pc-business-components/src/js/bdshare.js'
  import { elOffset, getScrollTop, numFormat } from 'byted-toutiao-pc-business-components/src/js/utils'
  import throttle from 'lodash/throttle'

  export default {
    props: {
      shareUrl: {
        type: String,
        default: 'http://www.toutiao.com/'
      },
      abstract: {
        type: String,
        default: '今日头条'
      },
      commentCount: {
        type: String,
        default: '0'
      }
    },
    data () {
      return {
        comment_Count: '0',
        shareFixed: false
      }
    },
    mounted () {
      this.qrcode = null
      this.comment_Count = numFormat(this.commentCount)
      window.addEventListener('scroll', throttle(this.handleScroll, 100), false)
    },
    methods: {
      weixinShare () {
        if (this.qrcode === null) {
          this.qrcode = new QRCode('J_qrcode', {
            width: 72,
            height: 72
          })
          this.qrcode.makeCode(this.shareUrl)
        }
      },
      bdShareClick (type) {
        let options = {
          url: this.shareUrl,
          text: '【（分享来自 @今日头条）' + this.abstract + '...',
          desc: '来自今日头条 http://www.toutiao.com/'
        }
        bdShare(type, options)
      },
      handleScroll () {
        let offsetTop = elOffset(this.$refs.shareBox).top
        let scrollTop = getScrollTop(window)
        if (scrollTop > offsetTop - 20) {
          this.shareFixed = true
        } else {
          this.shareFixed = false
        }
      }
    }
  }
</script>



// WEBPACK FOOTER //
// sharebox.vue?79c30c9c
